<template>
  <div  class="my-div">
    <el-icon><message /></el-icon>
  <br>
  <router-link to="/index" v-show="false">通过标签登录</router-link>
  <el-button type="primary" @click="login" v-show="false">登录</el-button>
  <el-card class="login-card">
    <div style="margin: auto;text-align: center;font-size: 22px;margin: 10px;font-weight:bold">上海应用技术大学地铁系统</div>
      <div class="inputdiv">
        <el-input
            v-model="loginform.username"
            style="width: 240px"
            size="large"
            placeholder="请输入用户名"
            :prefix-icon="User"
        />
      </div>
      <div class="inputdiv">
        <el-input
            v-model="loginform.password"
            size="large"
            type="password"
            style="width: 240px"
            placeholder="请输入密码"
            :prefix-icon="Lock"
        />
      </div>
    <div class="inputdiv">
      <el-date-picker
          v-model="loginform.date"
          type="date"
          placeholder="时间选择"
          style="width: 240px"
          size="large"
      />
    </div>
    <el-button
        type="primary"
        style="width: 200px;margin-top: 10px"
        class="inputdiv"
        @click="login"
    >登  录</el-button>

    <el-button
        type="primary"
        style="width: 200px;margin-top: 10px"
        class="inputdiv"
        @click="jumpToStruct"
    >框  架</el-button>

  </el-card>
  </div>
</template>

<script>
//通过useRouter 拿到路由对象 通过useRoute拿到当前路由地址
import {useRouter , useRoute} from "vue-router"
import {ref} from "vue";
import { User,Lock } from '@element-plus/icons-vue'
export default {
  name: "loginPage",
  setup(){

    let loginform = ref({
      username:'11',
      password:'11',
      date:'',
    })

    const  router = useRouter()
    const route = useRoute()

    function login(){
      console.log(route.path)
      router.push('/index')
    }

    function jumpToStruct(){
      console.log(route.path)
      router.push('/jumpToStruct')
    }

    return {
     login, loginform,User,Lock,jumpToStruct
    }
  }
}
</script>

<style scoped >
.my-div2 {
  background-image: url('../../assets/img/train.jpg');
  background-size: cover;
  background-position: center; /* 图片居中 */
  background-repeat: no-repeat; /* 图片不重复 */
  /* 其他的样式属性 */
}

/*让根div开启弹性布局，并且从右往左放置元素 ， 这样我的登录card就会从右边开始排布了*/
.my-div{
  display: flex;
  flex-direction: row-reverse;
  width: 100vw;
  background-color: #27af62;
  align-items: center; /* 让子元素在于主轴垂直的地方水平对齐 */
  height: 100vh;
  background-image: url('../../assets/img/train.jpg');
  background-size: cover;
  background-position: center; /* 图片居中 */
  background-repeat: no-repeat; /* 图片不重复 */
}


.inputdiv{
  padding: 7px;
}

/**
 这个样式的解释在下面
 */
.login-card{
  width: 380px;
  opacity: 0.9;
  height: fit-content;  /* 根据内容大小进行调整*/
  align-items: center;
  text-align: center;
  margin-right: 100px;
}
/* //"max-width: 380px;text-align: center;"
.login-card{
  width: 100%;
  height: 80%;
  display: flex; //开启弹性布局
  flex-direction: row-reverse;  //定义弹性布局的主轴，四种从row（从左到右） row-reverse（从右到左） colmn从上到下，coolumn-reverse
  align-items: center; //让子组件在与主轴垂直的中上居中对齐
  //justify-content: flex-end; // 应该让主轴翻转
  padding-right: 180px;
  background-position: 50%;
  background-repeat: no-repeat;  //让图片不重复
  background-size: cover ; //让图片自适应
  //justify-content: flex-end; //应该是取消弹性布局
  //"max-width: 380px;margin: 25px 25px;text-align: center;"
}
*/

</style>
